<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="img/smlogo.png" type="image/x-icon">
    <meta charset="UTF-8">
    <title>Pulu-留言</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/swiper_change.css"/>
    <style>
        html,body{
            height:100%;
            box-sizing: border-box;
        }
        body#chating{
            background: #F6F6F6;
            overflow: hidden;
        }
        #chatbody{
            box-sizing: border-box;
        }
        .mychatword,.otherchatword{
            overflow: hidden;
            padding:10px;
        }
        .mychatword .word{
            float:right;
            margin-right:4%;
            text-align: left;
        }
        .otherchatword .word{
            float: left;
            margin-left:4%;
        }
        .word{
            max-width:70%;
            width:auto;
            /*border:1px solid #ddd;*/
            font-size: 16px;
            padding:5px;
            border-radius: 5px;
            /*background: #62E051;*/
            background: #A0E75A;
            position:relative;
        }
        .arrow{
            position:absolute;
            right:-30px;
            top:9px;
            width:16px;
            height:0px;
            border:6px solid transparent;
            border-left: 8px solid #A0E75A;
        }
        .mychatword .img{
            float:right;
            margin-right:2%;
        }
        .otherchatword .img{
            float: left;
            margin-left: 2%;
        }
        .otherchatword .word .arrow{
            left:-24px;
            border-right: 8px solid #fff;
            border-left:none;
        }
        .otherchatword .word{
            background: #fff;
        }
        .img{
            width:10%;
            border:1px solid #ddd;
            border-radius: 3px;
        }
        .img img{
            width:100%;
            height:100%;
        }
        /*聊天表情*/
        ul,li{
            list-style:none;
        }
        ul{
            position: absolute;
            width:100%;
            overflow: hidden;
            bottom:46px;
            background:#fff;
            padding:5px;
        }
        ul.hide>li{
            float:left;
            width:30px;
            height:30px;
            padding:3px;
        }
        /*聊天输入框*/
        .main>div{
            position:absolute;
        }
        .main>div.addbtn{
            width:30px;
            height:30px;
            left:5px;
            background:url("img/jiahao011.png") no-repeat;
            background-size: 30px;
        }
        .main>div.inputdiv{
            left:41px;
            right:88px;
            border:1px solid #ABB8B8;
            border-radius: 4px;
            height:29px;
            padding:4px;
            box-sizing: border-box;
            bottom:7px;
        }
        .main>div.inputdiv>input{
            border:none;
            width:100%;
            height:100%;
            box-sizing: border-box;
        }
        .main>div.face{
            right:50px;
            top:9px;
            width:30px;
            height:30px;
            background:url("img/face011.png") no-repeat;
            background-size: 27px;
        }
        .main>div#sendword{
            right:5px;
            top:9px;
            border:1px solid #ABB8B8;
            border-radius:4px;
            padding:2px 4px;
            color:#fff;
            background:-webkit-linear-gradient(bottom,#6092F3,#6EA0FF);
            background: -moz-linear-gradient(top, #6092F3 0%, #6EA0FF 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6092F3), color-stop(100%,#6EA0FF));
            background: -webkit-linear-gradient(top, #6092F3 0%,#6EA0FF 100%);
            background: -o-linear-gradient(top, #6092F3 0%,#6EA0FF 100%);
            background: -ms-linear-gradient(top, #6092F3 0%,#6EA0FF 100%);
            background: linear-gradient(to bottom, #6092F3 0%,#6EA0FF 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6092F3', endColorstr='#6EA0FF',GradientType=0 );
        }
        #addimgbtn{
            width:100%;
            height:100%;
            opacity: 0;
        }
        .word img{
            width:20px;
            height:20px;
        }
        .word .getimg{
            width:123px;
            border-radius:5px;
        }
        /*时间部分*/
        .showtime{
            text-align: center;
            width:100%;
            box-sizing: border-box;
            padding-bottom:14px;
        }
        .showtime>span{
            border-radius: 3px;
            padding:3px 5px;
            height:20px;
            color:#fff;
            background:#CECECE;
            font-size:12px;
        }
        textarea.inputdiv {

            /*left: 41px;*/
            /*right: 88px;*/
            float:left;
            margin-left:41px;
            border: 1px solid #ABB8B8;
            border-radius: 4px;
            /*min-height: 29px;*/
            padding: 4px;
            box-sizing: border-box;
            bottom: 7px;
            /*float:right;*/
        }
        .main>div#sendword.cannotclick{
            background: #BDBFC5;
            color:#848486;
            border:1px solid #BDBFC5;
        }
        /*大图*/
        #digimgplace{
            background:#000000;
            background-position: center;
            background-repeat: no-repeat;
            /*height:100%;*/
            background-image: url("");
            background-size: 100%;
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            z-index: 1000;
        }
        /*头部群聊名超出隐藏*/
        #chating .page_title.unified{
            max-width:160px;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            overflow: hidden;
        }
        #facelist{
            width:100%;
            max-width: 1000px;
            min-width:320px;
            bottom:44px;
        }
        textarea{
            resize:none;
        }
        .main>p{
            overflow: hidden;
            border: 1px solid #ABB8B8;
            border-radius: 4px;
            position: absolute;
            left: 40px;
            right: 90px;
        }
        .main>p>textarea{
            border:none;
            margin:0;
            width:100%;
        }
        #chating #delall{right:44px;}
        #chating #delall a{
            background:url("img/messagedel.png") no-repeat center;
            background-size: 30px;
        }
        #chating #delall a:active{background-color:#AA3134}
        #chating #ref a{
            background:url("img/messageref.png") no-repeat center;
            background-size: 28px;
        }
        #chating #ref a:active{background-color:#AA3134}
    </style>
</head>
<body class=" experiment-lookup_bar-on gating-feed_switcher_bar-on mweb  gating-new_mweb_header_logged_out-off" id="chating" style="position: relative">
<div class="PageWrapper nonav" style="margin-top:0;">
    <!-- 头部-->
    <div class="Header ModalHeader">
        <div class="fixed_header" style="position: relative">
            <div class="header_main">
                <button class="mweb_modal_back_button"></button>
                <div class="page_title unified">
                    <span></span>
                </div>
                <div class="header_action_buttons" id="delall" style="left:inherit;">
                    <a></a>
                </div>
                <div class="header_action_buttons" id="ref" style="left:inherit;">
                    <a></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 聊天部分-->
<div id="chatbody" style="position: absolute;top:44px;bottom:45px;padding-bottom:5px;overflow-y:auto;height:auto;width:100%;box-sizing:border-box; ">
    <div style="position: relative">

    </div>
</div>
<!-- 底部-->
<div class="bottomnav" style="position: absolute;bottom:0;background:#FFF;">
    <div class="main">
        <!-- 上传-->
        <div class="addbtn" style="display:none;">
            <input type="file" id="addimgbtn"/>
        </div>
        <!-- 输入框-->
        <p style="height:31px;left:10px;">
            <textarea id="inputword" class="inputdiv" rows='1' cols="14"/></textarea>
        </p>
        <!-- 表情-->
        <div class="face"></div>
        <!--发送-->
        <div id="sendword" class="cannotclick">
            发送
        </div>
        <div id="facelist" style="display:none;">
            <div id="arrdiv"></div>
            <div class="swiper-container">
                <div class="swiper-wrapper">

                    <div class="swiper-slide"  id="zerofacepage">

                    </div>

                    <div class="swiper-slide" id="onefacepage">

                    </div>

                    <div class="swiper-slide" id="twofacepage">

                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 大图片-->
<div id="digimgplace" style="display: none;vertical-align: middle;height:100%;"></div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/tohref.js"></script>
<!--环信-->
<script type="text/javascript" src="sdk/webim.config.js"></script>
<script src="sdk/strophe-1.2.8.min.js"></script>
<script src="https://downloads.easemob.com/downloads/cdn/websdk-1.4.5.min.js"></script>

<!--<script type="text/javascript" src="https://www.pulu.com/weixin/sdk/webim.config.js"></script>-->
<!--<script src="https://www.pulu.com/weixin/sdk/strophe.js"></script>-->
<!--<script src="https://www.pulu.com/weixin/sdk/websdk-1.1.2.js"></script>-->

<script src="ftnjs/swiper.jquery.min.js"></script>
<script src="ftnjs/sendfaceftn.js"></script>

<script src="ftnjs/urlnote.js"></script>
<script src="js/chatinglm.js"></script>
<script>
    //监听textarea 状态
    $('#inputword').bind('input propertychange', function() {
        if(document.getElementById("inputword").value){
            document.getElementById("sendword").className="";
        }else{
            document.getElementById("sendword").className="cannotclick";
        }
    });
    //调整页面高度
    $("#chating").css({"height":$("html").css("height"),"min-height":$("html").css("height")});
    //修改表情区域宽度
    var widthdiv=document.getElementById("facelist");
    var usewidth;
    if(typeof window.getComputedStyle!='undefined'){
        usewidth=window.getComputedStyle(widthdiv,null)["width"];
    }else if(widthdiv.currentStyle){
        usewidth=parseInt(widthdiv.currentStyle["width"]);
    }
    $(".swiper-slide").css("width",usewidth+"px");
</script>
</body>
</html>